<template>
<!-- 员工绩效比拼 -->
  <div class="container-box">
    <!--筛选 -->
    <div class="form-box">
      <span>时间筛选：</span>
      <el-checkbox v-model="checked3">全选</el-checkbox>
      <el-checkbox v-model="checked31">7天</el-checkbox>
      <el-checkbox v-model="checked32">30天</el-checkbox>
      <!-- 平台渠道 -->
      <div class="chekbox-css">
        <span>平台渠道：</span>
        <el-checkbox v-model="checked1">全选</el-checkbox>
        <el-checkbox v-model="checked11">Amazon</el-checkbox>
      </div>
      <!-- 店铺账号 -->
      <div class="chekbox-css">
        <span>店铺账号：</span>
        <el-checkbox v-model="checked2">全选</el-checkbox>
        <el-checkbox v-model="checked21">陈俊煌k888999w@163.com（Amazon）</el-checkbox>
      </div>
    </div>
    <!-- 筛选统计 -->
    <div class="box-css">
      <div class="box1-css">
        <div class="box1-css-box1"><span>客户数</span></div>
        <div class="box1-css-box1"><span>订单量</span></div>
        <div class="box1-css-box2"><span>付款金额</span></div>
        <div class="box1-css-box2"><span>订单总金额</span></div>
        <div class="box1-css-box3"><span>订单取消数</span></div>
        <div class="box1-css-box4"><span>订单平均价格</span></div>
      </div>
      <div class="box2-css">
        <div class="box2-css-box1"><span>1131</span></div>
        <div class="box2-css-box1"><span>1502</span></div>
        <div class="box2-css-box2"><span>$ 43883.08	</span></div>
        <div class="box2-css-box2"><span>$ 43883.08</span></div>
        <div class="box2-css-box3"><span>10</span></div>
        <div class="box2-css-box4"><span>$ 388.08</span></div>
      </div>
    </div>
    <!-- 折线图 -->
    <div style="height: 330px;">
      <div id="main" style="height: 300px;"></div>
    </div>  
    <!-- 筛选后列表 -->
    <el-table
      :header-cell-style="tableHeaderColor"
      :data="tableData"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column prop="" label="时间" width="256"></el-table-column>
      <el-table-column prop="customer_num" label="顾客数" width="120"></el-table-column>
      <el-table-column prop="order_num" label="订单数" width="120"></el-table-column>
      <el-table-column prop="order_amount_money" label="订单总金额" width="120"></el-table-column>
      <el-table-column prop="order_pay_money" label="订单付款金额" width="120"></el-table-column>
      <el-table-column prop="order_pay_num" label="订单付款数" width="120"></el-table-column>
      <el-table-column prop="customer_pay_num" label="顾客付款数" width="120"></el-table-column>
      <el-table-column prop="order_cancel_num" label="订单取消数" width="120"></el-table-column>
      <el-table-column prop="good_counts" label="订单商品数量" width="120"></el-table-column>
      <el-table-column prop="average_customer_money" label="订单平均价格" width="120"></el-table-column>
    </el-table>
    <pagination
      @sendPageSize="receivePageSize"
      @sendCurrentPage="receiveCurrentPage"
      :totalPage="totalPage"
    ></pagination>
  </div>
</template>
<script>
import pagination from "common/pagination";
import echarts from 'echarts'
export default {
  data() {
    return {
      charts: '',
      opinionData: ["310.6", "222.5", "400.3", "400", "500.7","700.9","600.9"],
      totalPage: '',
      tableData: [],
      checked1: true,
      checked11: false,
      checked2: true,
      checked21: false,
      checked3: true,
      checked31: false,
      checked32: false,
      value: "",
      input2: "",
      DateValue: ""
    };
  },
  methods: {
    receivePageSize(val) {
      console.log(val);
    },
    receiveCurrentPage(val) {
      console.log(val);
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;";
      }
    },
    //折线图
    drawLine(id){
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['员工绩效']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
        saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ["员工1","员工2","员工3","员工4","员工5","员工6","员工7"]
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '员工绩效',
        type: 'line',
        data: this.opinionData
      }]
    })
    }
  },
   //调用
  mounted() {
    this.$nextTick(function() {
        this.drawLine('main')
    })
  },
  watch: {
    DateValue(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    }
  },
  components: {
    pagination
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    .chekbox-css{
    padding-top: 20px;
    }
  }
  .button-box {
    margin: 50px;
  }
  .box-css{
    height: 104px;
    padding: 10px 0px 0px 20px;
  }
  .box1-css{
    height: 34.4px;
    .box1-css-box1{
      width: 132.8px;
      height: 34.4px;
      float:left;
      line-height: 34.4px;
      text-align: right;
    }
    .box1-css-box2{
      width: 243.2px;
      height: 34.4px;
      float:left;
      line-height: 34.4px;
      text-align: right;
    }
    .box1-css-box3{
      width: 219.2px;
      height: 34.4px;
      float:left;
      line-height: 34.4px;
      text-align: right;
    }
    .box1-css-box4{
      width: 172.8px;
      height: 34.4px;
      float:left;
      line-height: 34.4px;
      text-align: right;
    }
  }
  .box2-css{
    height: 40px;
    .box2-css-box1{
      width: 132.8px;
      height: 40px;
      float:left;
      line-height: 40px;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #434649;
    }
    .box2-css-box2{
      width: 243.2px;
      height: 40px;
      float:left;
      line-height: 40px;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #434649;
    }
    .box2-css-box3{
      width: 219.2px;
      height: 40px;
      float:left;
      line-height: 40px;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #434649;
    }
    .box2-css-box4{
      width: 172.8px;
      height: 40px;
      float:left;
      line-height: 40px;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #434649;
    }
  }
}
</style>